<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/vue.js"></script>
    <link rel="stylesheet" href="app.css"></link>
</head>
<body>
<script type="text/javascript">
</script>
<div id="app-1">
    <my-component></my-component>
    <self-component></self-component>

    <table>
        <my-row></my-row>
    </table>

    <table>
        <tr  is="my-row"></tr>
    </table>

    <h4>data是个函数</h4>
    <hr/>
    <div>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
    </div>

    <h4>使用Prop传递数据</h4>
    <hr/>

    <child message="hello"></child>

    <h4>动态Prop传递数据</h4>
    <hr/>

    <div>
        <input type="text" v-model="parentMsg">
        <br>
        <dym-child v-bind:my-message="parentMsg"></dym-child>
    </div>

    <div id="counter-event-example">
        <p>{{total}}</p>
        <button-counter v-on:increment="incrementTotal"></button-counter>
        <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>

    <article>
        1、虽然我们将my-row标签添加table标签，当时到页面中渲染的是tr标签并没有渲染到table标签内，如下图<br/>
        <img src="../res/image/70.png" alt=""><br/>
        2、还需要注意一个问题，is="my-row"是不能添加到table标签中的，渲染也是无效的；需要将其添加到tr标签中<br/>
        3、定义在component的data必须是个function否则报出必须是function的错误，譬如：<br/>
        <img src="../res/image/71.png" alt=""><br/>
        4、不建议将data中的return对象引入来自与全局变量，这样会导致引用的变量一致，会导致变量被污染；

        使用Prop传递参数时，应得注意，从父组件到子组件使用props的方式进行传递参数，该参数是个数组对象；
        <img src="../res/image/72.png" alt=""><br/>
    </article>
</div>
</body>
<script type="text/javascript">
    Vue.component('button-counter',{
        template:'<button v-on:click="increment">{{counter}}</button>',
        data:function(){
            return {
                counter:0
            }
        },
        methods:{
            increment:function () {
                this.counter+=1;
                this.$emit('increment');
            }
        }
    });
    Vue.component('myRow',{
        template:'<tr><td>table items</td></tr>',
        data:function(){
            return {
                message:'123'
            }
        }
    });
    Vue.component('simple-counter',{
        template:'<button v-on:click="counter +=1">{{counter}}</button>',
        data:function(){
            return {
                counter:0
            }
        }
    });
    var app = new Vue({
        el:'#app-1',
        data:{
            parentMsg:'',
            total:0
        },
        methods:{
            incrementTotal:function () {
              this.total +=1;
          }
        },
        components:{
            selfComponent:{
                template:'<a href="http://www,baidu.com">内部组件</a>'
            }
        }
    });
    Vue.component('myComponent',{
        template:'<div>This is myComponent</div>'
    });
    Vue.component('child',{
        props:['message'],
        template:'<span>{{message}}</span>'
    });
    Vue.component('dym-child',{
        props:['myMessage'],
        template:'<span>动态绑定参数{{myMessage}}</span>'
    })
</script>
</html>